<template>
  <div class="age-container">
    <div class="age-container-title">
      <p>年龄比例</p>
      <img src="@/assets/images_screen/dataScreen-title.png" alt="">
    </div>
    <!-- echarts图表 -->
    <div class="age-container-charts" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

//dom节点
let chartsDom = ref();

//生命周期
onMounted(()=>{
  //获取echarts类的实例,初始化
  let mycharts = echarts.init(chartsDom.value);
  //设置实例的配置项
  mycharts.setOption({
     tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      right: '10px',
      orient:'vertical',
      textStyle:{
        color:'white'
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'inside'
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: 'bold',
            color:"white"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '18-30岁' },
          { value: 735, name: '30-45岁' },
          { value: 580, name: '10-18岁' },
          { value: 484, name: '45-60岁' },
          { value: 300, name: '60岁以上' }
        ]
      }
    ],
    //调整位置
    grid:{left:0,top:0,right:0,bottom:0},
  })
})
</script>
<script lang="ts">
export default {
    name:"age"
}
</script>

<style scoped>
.age-container{
  width: 100%;
  height: 100%;
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
}

.age-container .age-container-title{
  margin-left: 20px;
}
.age-container .age-container-title p{
  color:white;
  font-size: 20px;
}

.age-container-charts{
  height: 300px;
}
</style>